<a href="#" data-toggle="dropdown" class="dropdown-toggle">
    <i class="demo-pli-bell"></i>
    <span class="badge badge-header badge-danger"></span>
</a>

<!--Notification dropdown menu-->
<div class="dropdown-menu dropdown-menu-md">
    <div class="pad-all bord-btm">
        <p class="text-semibold text-main mar-no">You have 9 notifications.</p>
    </div>
    <div class="nano scrollable">
        <div class="nano-content">
            <ul class="head-list">

                <!-- Dropdown list-->
                <li>
                    <a href="#">
                        <div class="clearfix">
                            <p class="pull-left">Database Repair</p>
                            <p class="pull-right">70%</p>
                        </div>
                        <div class="progress progress-sm">
                            <div style="width: 70%;" class="progress-bar">
                                <span class="sr-only">70% Complete</span>
                            </div>
                        </div>
                    </a>
                </li>

                <!-- Dropdown list-->
                <li>
                    <a href="#">
                        <div class="clearfix">
                            <p class="pull-left">Upgrade Progress</p>
                            <p class="pull-right">10%</p>
                        </div>
                        <div class="progress progress-sm">
                            <div style="width: 10%;" class="progress-bar progress-bar-warning">
                                <span class="sr-only">10% Complete</span>
                            </div>
                        </div>
                    </a>
                </li>

                <!-- Dropdown list-->
                <li>
                    <a class="media" href="#">
                <span class="badge badge-success pull-right">90%</span>
                        <div class="media-left">
                            <i class="demo-pli-data-settings icon-2x"></i>
                        </div>
                        <div class="media-body">
                            <div class="text-nowrap">HDD is full</div>
                            <small class="text-muted">50 minutes ago</small>
                        </div>
                    </a>
                </li>

                <!-- Dropdown list-->
                <li>
                    <a class="media" href="#">
                        <div class="media-left">
                            <i class="demo-pli-file-edit icon-2x"></i>
                        </div>
                        <div class="media-body">
                            <div class="text-nowrap">Write a news article</div>
                            <small class="text-muted">Last Update 8 hours ago</small>
                        </div>
                    </a>
                </li>

                <!-- Dropdown list-->
                <li>
                    <a class="media" href="#">
                <span class="label label-danger pull-right">New</span>
                        <div class="media-left">
                            <i class="demo-pli-speech-bubble-7 icon-2x"></i>
                        </div>
                        <div class="media-body">
                            <div class="text-nowrap">Comment Sorting</div>
                            <small class="text-muted">Last Update 8 hours ago</small>
                        </div>
                    </a>
                </li>

                <!-- Dropdown list-->
                <li>
                    <a class="media" href="#">
                        <div class="media-left">
                            <i class="demo-pli-add-user-plus-star icon-2x"></i>
                        </div>
                        <div class="media-body">
                            <div class="text-nowrap">New User Registered</div>
                            <small class="text-muted">4 minutes ago</small>
                        </div>
                    </a>
                </li>

                <!-- Dropdown list-->
                <li class="bg-gray">
                    <a class="media" href="#">
                        <div class="media-left">
                            <img class="img-circle img-sm" alt="Profile Picture" src="/static/plugins/nifty/img/profile-photos/9.png">
                        </div>
                        <div class="media-body">
                            <div class="text-nowrap">Lucy sent you a message</div>
                            <small class="text-muted">30 minutes ago</small>
                        </div>
                    </a>
                </li>

                <!-- Dropdown list-->
                <li class="bg-gray">
                    <a class="media" href="#">
                        <div class="media-left">
                            <img class="img-circle img-sm" alt="Profile Picture" src="/static/plugins/nifty/img/profile-photos/3.png">
                        </div>
                        <div class="media-body">
                            <div class="text-nowrap">Jackson sent you a message</div>
                            <small class="text-muted">40 minutes ago</small>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!--Dropdown footer-->
    <div class="pad-all bord-top">
        <a href="#" class="btn-link text-dark box-block">
            <i class="fa fa-angle-right fa-lg pull-right"></i>Show All Notifications
        </a>
    </div>
</div>